<template>
  <div class="colorDiv">
        <el-dialog
            title="个人信息"
            :visible.sync="profileDialogVisible"
            width="530px"
            :modal="true"
            :close-on-click-modal="false"
            :append-to-body="true"
            custom-class="profile-dialog"
            :before-close="handleClose">
            <div class="profile-content">
                <div class="profile-row">
                <div class="profile-col">
                    <div class="profile-label">报警人</div>
                    <div class="profile-value">{{userProfile.user_name}}</div>
                </div>
                <div class="profile-col">
                    <div class="profile-label">手机号</div>
                    <div class="profile-value">{{userProfile.phone}}</div>
                </div>
                </div>
                <div class="profile-full-row">
                <div class="profile-label">常住地址</div>
                <div class="profile-value" v-if="userProfile.address">{{userProfile.address}}</div>
                <div class="profile-value" v-else>无</div>
                </div>
                <div class="profile-row">
                <div class="profile-col">
                    <div class="profile-label">紧急联系人</div>
                    <div class="profile-value">{{userProfile.contacts}}</div>
                </div>
                <div class="profile-col">
                    <div class="profile-label">紧急联系人手机号</div>
                    <div class="profile-value">{{userProfile.contact_phone}}</div>
                </div>
                </div>
            </div>
        </el-dialog>


  </div>
</template>

<script>
import { mapState } from 'vuex'; // 引入mapState
export default {
  props: {
    profileDialogVisible:{
        type: Boolean,
        default: false
    },
    user_id: {
        type: Number,
        default: 0

    }
  },
  data () {
    return {
        userProfile: {}
    };
  },
  components: {
   
  },
  computed: {
    ...mapState({
      cityId: state => state.system.cityId, // 从Vuex Store中获取cityId
    }),
  },
  created () {
    this.getDataInfo();
    this.$watch('cityId', (newVal, oldVal) => { // 监听cityId的变化
      if (newVal !== oldVal) {
        this.getDataInfo(); // 当cityId变化时重新请求数据
      }
    });
  },
  mounted () {
    
  },
  methods: {
        handleClose() {
            this.$emit('handleClose2', false)
        },
        getDataInfo() {
                this.$api.userInfo({
                    user_id: this.user_id,
                    region_id: this.cityId, 
                }).then(res => {
                    if(res.code == 0) {
                        console.log('89898',res.data)
                       
                        this.userProfile = res.data;

                    }
                })
        },
  }
};
</script>

<style  scoped>
     /deep/ .profile-dialog {
        margin: 0 !important;
        position: fixed!important;
        right: 0;
        top: 0;
        height: 100vh;
        background: #fff!important;
       color: #1F1F1F;
        border-radius: 0;
        z-index: 99999;
    }

    /deep/ .el-dialog__header {
        border-bottom: 1px solid rgba(0,0,0,0.2)!important;
    }

   /deep/  .el-dialog__title {
      color: #1F1F1F;
      font-weight: bold;
    }

    /deep/ .el-dialog__body {
        padding: 20px;
    }
 
    .profile-row {
      display: flex;
      margin-bottom: 15px;
    }
    .profile-full-row {
      margin-bottom: 25px;
    }
     .profile-col {
      flex: 1;
      padding: 0 5px;
      margin-bottom: 15px;
    }
    
    .profile-label {
      color: #1F1F1F;
      font-size: 14px;
      margin-bottom: 10px;
    }
    .profile-value {
     /* color: #1F1F1F; */
      font-size: 14px;
      height: 40px;
      line-height: 40px;
      word-break: break-all;
      /* background: rgba(255, 255, 255, 0.1); */
      padding-left: 15px;
      background-color: #F5F7FA;
      border-color: #E4E7ED;
      color: #C0C4CC;
    }
    .profile-content {
        padding: 0 10px;
    }
</style>